<template>
	<view class="pay_electy">
		<view class="electy_top">
			<view class="top_zf">
				<view class="top_zf_fl" v-if="pageData.type == 'water'">
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/shudi.png'" mode=""></image>
					<text>水费账户</text>
				</view>
				<view class="top_zf_fl" v-if="pageData.type == 'electric'">
					<image :src="'https://community.chuangxiangdianli.com/images/propertyImg/dianfei@2x.png'" mode=""></image>
					<text>电费账户</text>
				</view>
				<text class="top_zf_fr">{{pageData.meter_code || 0}}</text>
			</view>
			<view class="top_ye">
				<view class="top_ye_item">
					<text>当前余额(元)</text>
					<text>{{pageData.balance}}</text>
				</view>
				<!-- <view class="top_ye_item">
					<text>当前欠费(元)</text>
					<text>0.00</text>
				</view> -->
			</view>
		</view>
		<view class="electy_moy">
			<text class="moy_pay">缴纳金额</text>
			<input type="text" v-model="money" class="moy_input" placeholder="输入缴纳金额" />
		</view>
		<view class="electy_btn" @click="electyBtn">
			支付
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			if (JSON.parse(option.info)) {
				this.pageData = JSON.parse(option.info)
			} 
		},
		data() {
			return {
				pageData: {
					type: 'water'
				},
				// 金额
				money: ''
			};
		},
		methods: {
			electyBtn() {
				let _this = this
				let data = {
					// 费用类型：1，电费；2，水费；3，物业费
					fee_type: _this.pageData.type == 'electric' ? '1' : '2',
					type: 1,
					paymentMoney: _this.money,
					// 支付方式
					pay_type: 1,
					// 设备类型：1，小程序；2，公众号；3，H5
					device_type: 1
				}
				//生成订单 
				_this.$mrequest2({
					url: 'Mini/pay_order/store',
					method: 'POST',
					data
				}).then(res => {
					if (res.code == 200) { 
						// 获取订单等信息
						let storeInfo = res.data
						// 调起支付
						uni.requestPayment({
							// 服务商类型
							provider: 'wxpay',
							// 订单数据
							// orderInfo
							// 时间戳
							timeStamp: storeInfo.return_Data.timeStamp,
							// 随机字符串
							nonceStr: storeInfo.return_Data.nonceStr,
							 // prepay_id 参数值
							package: storeInfo.return_Data.package,
							// 签名算法
							signType: storeInfo.return_Data.signType,
							// 签名
							paySign: storeInfo.return_Data.paySign,
							success: res => {
								console.log(res)
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								// 返回上一页
								uni.navigateBack({delta: 1})
							},
							fail: err => { 
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
								console.log('fail:' + JSON.stringify(err));
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pay_electy {
		height: 100vh;
		background-color: #f7f8f9;

		.electy_top {
			padding: 0 36rpx;
			font-size: 28rpx;
			background-color: #fff;

			.top_zf {
				display: flex;
				justify-content: space-between;
				height: 98rpx;
				line-height: 98rpx;
				border-bottom: 1rpx solid #f7f8f9;

				.top_zf_fl {
					display: flex;

					image {
						margin: auto 24rpx auto 0;
						width: 39rpx;
						height: 50rpx;
					}
				}
			}

			.top_ye {
				padding-bottom: 20rpx;
				display: flex;
				flex-direction: column;

				// height: 238rpx;
				.top_ye_item {
					height: 110rpx;
					line-height: 110rpx;
					display: flex;
					justify-content: space-between;
					line-height: 115rpx;
				}
			}
		}

		.electy_moy {
			margin-top: 18rpx;
			padding: 0 36rpx 36rpx 36rpx;
			height: 242rpx;
			background-color: #fff;

			.moy_pay {
				display: block;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 28rpx;
				font-weight: 700;
			}

			.moy_input {
				height: 100rpx;
				border-bottom: 1rpx solid #f7f8f9;
			}
		}

		.electy_btn {
			margin: 44rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			background: #34B0FF;
			border-radius: 10rpx;
		}
	}
</style>
